import React from 'react';
import { connect } from 'react-redux'
import { IState } from '../store/index'
import { Dispatch } from 'redux'
import { getBannerAction } from '../store/actions/find'
import { Carousel, WingBlank } from 'antd-mobile';
import '../less/find.less'

export interface IProps {
    bannerList: [];
    dispatch: Dispatch
}

export interface banner{
    pic:string,
    [props:string]:any
}
class Find extends React.Component<IProps> {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
    }
    componentDidMount() {
        if(this.props.bannerList.length === 0){
            this.props.dispatch(getBannerAction())
        }
    }
    render() {
        let { bannerList } = this.props;
        return <div className=''>
            <WingBlank >
                <Carousel
                    className='banner_box'
                    autoplay={false}
                    infinite
                >
                    {bannerList.map((val:banner) => (
                        <img
                            src={val.pic}
                            key={val.pic}
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top' }}
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                        />
                    ))}
                </Carousel>
            </WingBlank>
        </div>;
    }
}
export default connect((state: IState) => {
    return {
        bannerList: state.find.bannerList
    }
}, (dispatch: Dispatch) => ({ dispatch }))(Find)